<template>
	<view>
		<u-navbar :border-bottom="false" title-color="#333" title-bold title="添加法海" title-size="36"></u-navbar>

		<view class="d-id u-padding-24">
			<view class="d-item flex flex_sb border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					标题<span class="xing">*</span>
				</view>
				<u-input input-align="right" v-model="title" />
			</view>
			<view class="d-item flex flex_sb border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					领域<span class="xing">*</span>
				</view>
				<view class="flex" @click="lyshow=true">
					<view class="u-m-r-4 item-vl">
						{{lytype?lytype:'请选择'}}
					</view>
					<u-icon name="arrow-right" color="#333" size="24"></u-icon>
				</view>
			</view>
			<view class="d-item flex flex_sb border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					关联服务类型<span class="xing">*</span>
				</view>
				<view class="flex" @click="wcshow=true">
					<view class="u-m-r-4 item-vl">
						{{type?type:'请选择'}}
					</view>
					<u-icon name="arrow-right" color="#333" size="24"></u-icon>
				</view>
			</view>
			<view class="font_weight u-p-b-22 u-p-t-22">
				详情<span class="xing">*</span>
			</view>
			<view class="textarea-d">
				<u-input maxlength="0" v-model="content" type="textarea" height="280" placeholder="请输入内容" />
			</view>
			<!-- <view class="u-m-t-10 u-m-t-34">
				<view class="addimgbtn" @click="chooseMedia">
					<u-icon name="camera" color="#c8c8c8" size="60"></u-icon>
					<view class="font_12_666 u-m-t-10">
						添加图片或视频
					</view>
					
				</view>
			</view> -->
			<view class="u-m-t-10 u-m-t-34 flex flex_wrap">
				<!-- <view class="addimg u-margin-4" v-for="(item,index) in images" :key="index"
				v-if="item.split('.').pop()=='png' || item.split('.').pop()=='jpg'" >
					<image class="addimg"  :src="item" mode="aspectFill"></image>
				</view>
				<view class="addimg u-margin-4" v-for="(item,index) in images" :key="index"
				 v-if="item.split('.').pop()=='mp4'">
				    <video class="addimg"  :src="item" controls></video>
				 </view> -->
				<view class="addimg u-margin-4" v-for="(item,index) in images" :key="index">
					<image class="addimg" :src="item" mode="aspectFill"></image>
				</view>
				<view class="addimgbtn" @click="chooseMedia" v-if="images.length<6">
					<u-icon name="camera" color="#c8c8c8" size="60"></u-icon>
					<view class="font_12_666 u-m-t-10">
						添加图片
					</view>
				</view>
			</view>
			<view class="u-m-t-10 u-m-t-34 flex flex_wrap">
				<view class="addimg u-margin-4" v-if="video">
					<video class="addimg" :src="video" controls></video>
				</view>
				<view class="addimgbtn"  @click="chooseMedia2" v-else>
					<u-icon name="camera" color="#c8c8c8" size="60"></u-icon>
					<view class="font_12_666 u-m-t-10">
						添加视频
					</view>
				</view>
				
			</view>
		</view>

		<u-picker mode="selector" confirm-color="#20C064" :range="lyselector" v-model="lyshow" range-key="name"
			@confirm="lyshowconfirm"></u-picker>
		<u-picker mode="selector" confirm-color="#20C064" :range="selector" v-model="wcshow" range-key="name"
			@confirm="showconfirm"></u-picker>
		<view class="" style="width: 100%;height: 170rpx;"></view>
		<view class="btn-bo">
			<button class="btn_login_btn" @click="$u.throttle(submit, 2000)">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wcshow: false,
				lyshow: false,
				lytype: '',
				name: '',
				phone: '',
				list: [],
				type: '',

				// 演示地址，请勿直接使用
				action: '',
				fileList: [],

				formData: {
					token: uni.getStorageSync("token")
				},
				selector: [],
				lyselector: [],

				title: '',
				tag1_id: '',
				tag2_id: '',
				content: '',
				images: [],
				video: '',



				id: ''
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.detail()
			}
			this.lingyuList()
			this.fuwuList()
			this.action = this.$config.uploadUrl
			console.log(this.action)
			// this.getType()
		},
		methods: {
			detail() {
				this.$api({
					url: '/lawyer/getSeaInfo',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						id: this.id
					},
				}).then(res => {
					if (res.code == 1) {
						this.title = res.data.title
						this.tag1_id = res.data.tag1_id
						this.tag2_id = res.data.tag2_id
						this.content = res.data.content
						this.images = res.data.images
						this.lytype = res.data.tag1_name
						this.type = res.data.tag2_name
						this.video = res.data.video
					}
				})
			},
			lingyuList() {
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type: 1 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.lyselector = res.data
					}
				})
			},
			fuwuList() {
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type: 2 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.selector = res.data
					}
				})
			},
			chooseMedia() {
				let that = this
				
				
				uni.chooseMedia({
					count: 6,
					mediaType: ['image'],
					sourceType: ['album'],
					maxDuration: 30,
					camera: 'back',
					success(res) {
						console.log(res.tempFiles)
						const tempFiles = res.tempFiles;
						for (let i = 0; i < tempFiles.length; i++) {
							console.log(tempFiles.length)
							uni.uploadFile({
								url: that.$config.uploadUrl,
								filePath: tempFiles[i].tempFilePath,
								name: 'file',
								formData: {
									token: uni.getStorageSync('token')
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes.data);
									if (JSON.parse(uploadFileRes.data).code != 1) {
										uni.showToast({
											title: JSON.parse(uploadFileRes.data).msg,
											icon: 'none'
										})
										return
									}
									that.images.push(JSON.parse(uploadFileRes.data).data.path)
								}
							});
						}
					}
				})
			},
			chooseMedia2() {
				
				let that = this
				uni.chooseVideo({
					// count: 1,
					// mediaType: ['video'],
					sourceType: ['album'],
					// maxDuration: 30,
					// camera: 'back',
					success(res) {
						console.log(res)
						const tempFiles = res;
						uni.uploadFile({
							url: that.$config.uploadUrl,
							filePath: tempFiles.tempFilePath,
							name: 'file',
							formData: {
								token: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								if (JSON.parse(uploadFileRes.data).code != 1) {
									uni.showToast({
										title: JSON.parse(uploadFileRes.data).msg,
										icon: 'none'
									})
									return
								}
								that.video = JSON.parse(uploadFileRes.data).data.path
							}
						});

					}
				})
			},
			showconfirm(e) {
				this.type = this.selector[e].name
				this.tag2_id = this.selector[e].id
				// console.log(e)
			},
			lyshowconfirm(e) {
				this.lytype = this.lyselector[e].name
				this.tag1_id = this.lyselector[e].id
				// console.log(e)

			},
			back() {
				uni.navigateBack()
			},
			onSuccess(data, index, lists, name) {
				console.log(data)
				this.images.push(data.data.path)


			},
			submit() {
				if (!this.title) {
					uni.showToast({
						title: "请输入标题",
						icon: "none"
					});
					return
				}
				if (!this.tag1_id) {
					uni.showToast({
						title: "请选择领域",
						icon: "none"
					});
					return
				}
				if (!this.tag2_id) {
					uni.showToast({
						title: "请选择服务类型",
						icon: "none"
					});
					return
				}
				if (!this.content) {
					uni.showToast({
						title: "请输入详情",
						icon: "none"
					});
					return
				}
				this.$api({
					url: '/lawyer/saveSeaInfo',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						tag1_id: this.tag1_id,
						tag2_id: this.tag2_id,
						content: this.content,
						images: this.images.toString(),
						video:this.video,
						title: this.title,
						id: this.id
					},
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "新增成功",
							icon: "none"
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},



		}
	}
</script>

<style scoped lang="scss">
	.addimg {
		width: 152rpx;
		height: 200rpx;

	}

	.addimgbtn {
		width: 152rpx;
		height: 200rpx;
		border: 1px dashed #C8C8C8;
		text-align: center;
		padding-top: 30rpx;
		color: #C8C8C8;
		font-size: 24rpx;
		padding: 30rpx 20rpx;
	}

	.xing {
		color: #FF0000;
	}

	.popupmd {
		width: 554rpx;
		// height: 344rpx;
		background: linear-gradient(180deg, #FFECEA 0%, #FFFFFF 100%);
		padding: 68rpx 24rpx;


		.p-bd {
			font-size: 28rpx;
			line-height: 64rpx;
			text-align: center;

			.p-btn2 {
				width: 248rpx;
				height: 64rpx;
				background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				color: #FFFFFF;
			}
		}


	}

	.btn-bo {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		padding-top: 14rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;

		.btn_login_btn {
			width: 686rpx;
			height: 90rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			// margin-top: 116rpx;
			font-size: 36rpx;
			color: #fff;
			line-height: 90rpx;
			margin-left: 32rpx;
			text-align: center;
			font-weight: bold;
		}
	}

	.d-id {
		width: 702rpx;
		padding: 0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 24rpx auto;

		.d-item {
			height: 100rpx;

			.d-item-t {
				width: 200rpx;
			}
		}

		.item-vl {
			font-size: 28rpx;
			color: #9695A3;
			width: 256rpx;
			text-align: right;
		}
	}

	.textarea-d {
		width: 640rpx;
		min-height: 280rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 24rpx;
	}
</style>